<template>
  <div>
    <div class="container">
      <h1>茶博士销售系统</h1>
      <div style="margin: 20px;"></div>
      <el-form :label-position="labelPosition" label-width="80px" :model="loginInfo">
        <el-form-item label="用户名：">
          <el-input v-model="loginInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginInfo.password"></el-input>
        </el-form-item>
      </el-form>
      <el-row>
        <el-button type="primary" round @click="login" class="no-style-link" style="background-color: green; color: #fff;">登录</el-button>
        <el-button type="primary" round style="background-color: green; color: #fff;" >
          <router-link to="/register" class="no-style-link">注册</router-link>
        </el-button>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果容器有固定高度） */
  height: 100vh;
  flex-direction: column; /* 使子元素垂直排列 */
  background-image: url('../../image/3.jpeg'); /* 添加背景图片 */
  background-size: 100% 100%;  /* 覆盖整个背景 */
  background-position: center; /* 居中显示 */
}
.no-style-link {
  text-decoration: none; /* 去掉下划线 */
  color: white; /* 继承父元素的颜色，通常是黑色或默认文本颜色 */
}
</style>
<script>
import axios from "axios";
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      labelPosition: 'right',
      loginInfo: {
        username: 'admin',
        password: '1234'
      }
    };
  },
  methods: {
    login() {
      this.loading = true; // 开启加载状态
      axios.post('/api/login', this.loginInfo)
          .then((res) => {
            this.loading = false; // 请求结束后关闭加载状态
            const { code, msg, data } = res.data;

            if (code === 1) { // 登录成功
              Cookies.set('token', data, { expires: 1 }); // 将 token 存入 Cookie，过期时间 1 天
              console.log(`token: ${data}`);
              this.$message.success(msg || '登录成功');
              this.$router.push({ name: 'userInfo' }); // 跳转页面
            } else { // 登录失败
              this.$message.error(msg || '登录失败');
            }
          })
          .catch((err) => {
            this.loading = false; // 处理网络或其他异常
            console.error(err);
            this.$message.error(err.response?.data?.msg || '登录请求出错');
          });
    },
    // register() {
    //   alert('注册');
    // }
  }
}
</script>
